<template>
  <div class="echart-pie-container">
    <div
      ref="chart"
      style="width: 100%; height: 100%"
    >
    </div>
    <el-button
      class="detail-button"
      type="text"
      @click="toDetail"
    >查看详情</el-button>
  </div>

</template>

<script>
import echarts from 'echarts';
export default {
  props: {
    dataOptionList: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      option: null,
      myChart: null,
      legend: {}
    };
  },
  mounted() {
    // this.getEchartData();
    if (this.$refs.chart.clientWidth < 455) {
      this.legend = {
        textStyle: {
          color: '#66769b'
        },
        orient: 'vertical',
        top: '40px',
        left: '10px',
        bottom: '0'
      };
    } else {
      this.legend = {
        textStyle: {
          color: '#66769b'
        },
        orient: 'horizontal',
        top: 'auto',
        left: 'center',
        bottom: '0'
      };
    }
    window.addEventListener('resize', this.onResize);
  },
  methods: {
    toDetail() {
      this.$emit('toDetail');
    },
    onResize() {
      if (this.$refs.chart.clientWidth < 455) {
        this.legend = {
          orient: 'vertical',
          top: '40px',
          left: '10px',
          bottom: '0'
        };
      } else {
        this.legend = {
          orient: 'horizontal',
          top: 'auto',
          left: 'center',
          bottom: '0'
        };
      }
      this.myChart.setOption({ legend: this.legend });
      this.myChart.resize();
    },
    getEchartData() {
      const chart = this.$refs.chart;
      this.myChart = echarts.init(chart);
      if (chart) {
        this.option = {
          title: {
            text: this.dataOptionList.dataPie[0][0],
            left: '10px',
            top: '10px',
            textStyle: {
              color: '#636985'
            }
          },
          tooltip: {},
          legend: this.legend,
          dataset: {
            source: this.dataOptionList.dataPie
          },
          series: [
            {
              name: this.dataOptionList.dataPie[0][0],
              type: 'pie',
              radius: ['50%', '70%'],
              legendHoverLink: false,
              itemStyle: {
                normal: {
                  color: params => {
                    const colorList = this.dataOptionList.colorList;
                    return colorList[params.dataIndex];
                  }
                }
              },
              avoidLabelOverlap: false,
              label: {
                show: true,
                position: 'center',
                color: '#ccc',
                fontSize: '24',
                formatter: () => {
                  let total = 0;
                  for (let i = 1; i < this.dataOptionList.dataPie.length; i++) {
                    total += parseInt(this.dataOptionList.dataPie[i][1]);
                  }
                  return '总数\n' + total.toString();
                }
              },
              emphasis: {
                label: {
                  show: true,
                  // color: 'red',
                  fontSize: '24',
                  fontWeight: 'bold',
                  formatter: '{b}\n{@[1]}'
                  // formatter: '{b}\n{@[1]},{d}%'
                }
              },
              labelLine: {
                show: false
              }
            }
          ]
        };
        this.myChart.setOption(this.option);
        // 默认显示高亮
        // this.myChart.dispatchAction({ type: 'highlight', dataIndex: 6 });
        this.myChart.on('mouseover', e => {
          this.option.series[0].label.show = false;
          this.option.series[0].label.color = undefined;
          this.myChart.setOption(this.option);
          this.myChart.setOption({ legend: this.legend });
          // if (e.dataIndex !== 6) {
          //   this.myChart.dispatchAction({ type: 'downplay', dataIndex: 6 });
          // }
        });
        // 当鼠标离开时，把当前项置为选中
        this.myChart.on('mouseout', () => {
          this.option.series[0].label.show = true;
          this.option.series[0].label.color = '#ccc';
          this.myChart.setOption(this.option);
          this.myChart.setOption({ legend: this.legend });
        });
      }
    }
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.onResize);
  }
};
</script>

<style lang="scss" scoped>
.echart-pie-container {
  position: relative;
}
.detail-button {
  position: absolute;
  top: 0px;
  right: 15px;
}
</style>
